// 生成购物窗
(function AddProduct(){
    var shopping = document.querySelector(".shopping");
    var array = [];
    for(var i = 0;i<10;i++){
        array.push('<div class="productContainer"><img src="./images/杯子.png" alt=""><h1>笑脸马克杯</h1><p>笑脸马克杯，陶瓷制品</p><div class="money">¥ 130</div><div class="oldMoney"><div class="line"></div><p>¥169</p></div><img class="shoppingCar" src="./images/购物车_03.jpg" alt=""></div>');
    }
    shopping.innerHTML = array.join('');
})()
// 轮播图
function changeImg(){
    var changeImg = document.querySelector(".changeImg");
    var ul = changeImg.children[0];
    addSmallCircle(ul);
    // 给页面添加小圆点
    var w  = changeImg.offsetWidth;
    window.index = 0;
    fingerMoveImg(ul,w);
    // 2s调用一次切换轮播图函数
    window.timer = setInterval(function(){
        changeImgTimer(ul,w);
    },2000);
    // 监听过渡完成的事件
    ul.addEventListener("transitionend",function(){
        changeSmoss(ul,w);
        // 轮播图无缝切换
        changeSmallCircle();
        // 小圆点跟随轮播图改变样式
    })
}
// 创建轮播图计时器
function changeImgTimer(ul,w){
    index++;
    var translatex = -index*w;
    ul.style.transition = "all .3s";
    // 添加动画过渡效果
    ul.style.transform = "translateX("+translatex+"px)";
}
// 去掉过渡效果，让图片瞬间跳到某一张，以达到流畅的无缝切换
function recoverTransition(ul,index,w){
    ul.style.transition = "none";
    // 去掉过渡效果，让ul快速跳到目标位置
    var translatex = -index*w;
    ul.style.transform = "translateX("+translatex+"px)";
    // 快速跳到目标位置
}
// 无缝切换
function changeSmoss(ul,w){
     // 无缝滚动
     if(index >= ul.children.length - 2){
        index = 0;
        recoverTransition(ul,index,w);
    }else if(index < 0){
        // 左滑动到第一张且再往左滑的时候，快速跳到倒数第二张
        index = ul.children.length - 3;
        recoverTransition(ul,index,w); 
    }
}
// 在页面中添加小圆点
function addSmallCircle(ul){
    var ol = document.querySelector(".smallCircle").children[0];
    for(var i = 0;i < ul.children.length - 2;i++){
        var li = document.createElement("li");
        ol.appendChild(li);
    }
    ol.children[0].classList.add("bigWhiteLi"); 
}
// 小圆点跟着轮播图变化
function changeSmallCircle(){
    var ol = document.querySelector(".smallCircle").children[0];
    for(var i = 0;i < ol.children.length;i++){
        ol.querySelector(".bigWhiteLi").classList.remove("bigWhiteLi");
        // 把ol里面li带有bigWhiteLi这个类名的选出来并去掉类名
        ol.children[index].classList.add("bigWhiteLi"); 
        // 对应index的小Li添加样式
    }
}
// 手指移动轮播图
function fingerMoveImg(ul,w){
    var startX = 0;
    window.moveX = 0;
    // 触摸元素
    ul.addEventListener('touchstart',function(e){
        startX = e.targetTouches[0].pageX;
        // 获取手指初始距离
        clearInterval(timer);
    });
    // 手指移动
    ul.addEventListener('touchmove',function(e){
        moveX = e.targetTouches[0].pageX - startX;
        // 手指在ul上移动的距离
        var translateX = -index*w + moveX;
        // 盒子移动的距离等于本身的距离+手指移动的距离
        ul.style.transition = "none";
        // 手指移动，不需要过渡
        ul.style.transform = "translate("+translateX+"px)";
        // 阻止滚动行为
        e.preventDefault();
    });
    // 手指移开
    ul.addEventListener('touchend',function(){
        // 图片左右移动或者弹回
        rightOrLeft(ul,moveX,w);
        // 重新开启计时器
        window.timer = setInterval(function(){
            changeImgTimer(ul,w);
        },2000);
    });
}
// 根据手指滑动判断左滑还是右滑
function rightOrLeft(ul,moveX,w){
    if(Math.abs(moveX)>50){
        moveX > 0?index -- :index++;
    }
    var translateX = - index*w;
    ul.style.transition = 'all .3s';
    ul.style.transform = "translateX("+translateX + "px)";
}


// 执行函数
changeImg();